<template>
  <div class="sale" ww3 auto>
    <div class="sale-bar" flex flex-b flex-c>
      <p grey fz14>您共购买授权<i>{{list.length}}</i>件作品</p>

      <div class="sale-bar-r">
        <el-input
          placeholder="输入标题或素材编号、卖家"
          suffix-icon="el-icon-search"
          v-model="input2"
        >
        </el-input>
      </div>
    </div>

    <div class="sale-type">
      <!-- <div class="sale-type-l">
        <el-radio v-model="radio" label="1">全部</el-radio>
        <el-radio v-model="radio" label="2">个人授权</el-radio>
        <el-radio v-model="radio" label="3">企业授权</el-radio>
        <el-radio v-model="radio" label="4">企业PLUS授权</el-radio>
      </div> -->

      <div class="sale-type-r" style="text-align: right;">
        <el-button @click="vatAction">发票中心</el-button>
        <el-button>详细授权规则</el-button>
      </div>
    </div>

    <div class="sale-table">
      <el-table :data="list" style="width: 100%">
        <el-table-column fixed prop="name" label="素材" width="290">
          <template slot-scope="scope">
            <dl class="table-img" pos-a>
              <dt pos-a>
                <p pos-b ww1>{{scope.row.title}}</p>
                <el-image ww1 :src="fileUrl + scope.row.filesImg1" fit="cover"> </el-image>
              </dt>
              <dd pos-b flex flex-b flex-c ww1>素材编号：{{scope.row.fileNumber}}</dd>
            </dl>
          </template>
        </el-table-column>

        <el-table-column prop="date" label="授权类型" width="120">
          <template slot-scope="scope">
            {{videoTypeFun(scope.row.videoType)}}
          </template>
        </el-table-column>

        <el-table-column prop="authorizedName" label="卖家"> </el-table-column>
        <el-table-column prop="authorizationNumber" label="订单授权证书编号" width="180">
          <template slot-scope="scope">
            <p style="padding: 0 0 6px 0px">
              {{ scope.row.authorizationNumber }}
            </p>
            <el-button
              size="mini"
              @click="lookPdf(scope.row.link)"
              v-if="scope.row.status"
            >
              (查看证书)
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="支付¥"> </el-table-column>

        <el-table-column prop="payTime" label="购买时间"> </el-table-column>

        <el-table-column prop="per" label="被授权主体" width="180">
          <template slot-scope="scope">
            <template v-if="scope.row.status">
              <p style="color: #222">
                {{ scope.row.per }}
              </p>
              {{ scope.row.card }}
            </template>
            <template v-if="!scope.row.authorizedParty">
              <el-button size="mini" @click="viewCer(scope.row)">
                (补充获取授权书)
              </el-button>
            </template>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <div class="btn-wrapper" @click="handleClick(scope.row)" type="text" size="small"
              >评论</div>
            <div class="btn-wrapper" type="text" size="small" @click="action(scope.row)"
              >投诉</div
            >
            <div class="btn-wrapper" type="text" size="small" @click="viewTion"
              >授权说明</div
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div flex ww1 style="justify-content: center">
      <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="currentChange">
      </el-pagination>
    </div>

    <el-dialog
      title="发表评论"
      :visible.sync="dialogFormVisible"
      width="38%"
      class="show"
    >
      <el-input
        type="textarea"
        placeholder="请输入评论内容"
        v-model="textarea"
        maxlength="255"
        show-word-limit
        :required="true"
        class="chara-form"
      >
      </el-input>
      <div slot="footer" class="dialog-footer" flex flex-c space-be>
        <el-popover placement="top-start" width="230" popper-class="emoji">
          <div style="width: 230px; height: 60px; overflow-y: auto">
            <chat-emoji @addEmoji="addEmoji"></chat-emoji>
          </div>

          <div slot="reference">
            <svg class="icon" aria-hidden="true " cur>
              <use xlink:href="#icon-biaoqing"></use>
            </svg>
          </div>
        </el-popover>

        <el-button type="primary" @click="dialogFormVisible = false"
          >发表评论</el-button
        >
      </div>
    </el-dialog>


    <feedbackWork ref="feedbackWork"/>
    <!-- <action-dialog
      :visible.sync="actionDia"
      :row="row"
      v-if="actionDia"
    ></action-dialog> -->
  </div>
</template>

<script>
import ChatEmoji from "@/components/ChatEmoji";
import feedbackWork from "@/components/dialog/FeedbackWork"
import $http from "@/api/info/car"
export default {
  name: "SaleRecord",
  components: {
    ChatEmoji,
    feedbackWork,
    // ActionDialog: () => import("@/components/ActionDialog"),
  },
created() {
  // this.$router.push({
  //   name: "CertificateView",
  //   params: {
  //     id: 123,
  //   },
  // });
},
  data() {
    return {
      fileUrl: this.$url.fileUrl,
      radio: "1",
      input2: "",
      dialogFormVisible: false,
      tableData: [
        {
          date: "企业PLUS授权",
          name: "https://images.pond5.com/pumpkins-harvest-festival-footage-161004695_iconv.jpeg",
          province: "炫酷",
          city: "Rango_Fu",
          address: "9134001005901813064",
          zip: 200333,
          date2: "2021-11-01",
          per: "黄千惠",
          card: "450***********23",
          id: "913400",
          status: true,
          link: "http://vjshi-auth-letter.oss-cn-shanghai.aliyuncs.com/2021-11-16/SL211116100704609_937ea4fef54649a19adf2fbdb4151311.pdf?Expires=1637079026&OSSAccessKeyId=LTAIYNXXSF750iQD&Signature=84cNuIuXEyOT4sUh25N2lLgwjBk%3D",
        },
        {
          date: "个人授权",
          name: "https://images.pond5.com/russia-caucasus-young-woman-looks-footage-159693843_iconv.jpeg",
          province: "炫酷",
          city: "ariaaaaa",
          address: "9134001005901813064",
          zip: 200333,
          date2: "2021-10-01",
          per: "补充授权书",
          id: "913",
        },
        {
          date: "企业授权",
          name: "https://images.pond5.com/mother-cheating-she-and-daughter-footage-157335839_iconv.jpeg",
          province: "炫酷",
          city: "v17113016",
          address: "9134001005901813064",
          zip: 200333,
          date2: "2021-10-01",
          per: "",
          id: "3400",
        },
      ],
      textarea: "",
      actionDia: false,
      row: {},
      pageSize: 2,
      pageNum: 1,
      total: 10,
      list: []
    };
  },
  mounted() {
    this.orderPage();
  },
  methods: {
    /**
     * 
     */
    videoTypeFun(type) {
      if(type == 1) {
        return '个人授权'
      } else if(type == 2) {
        return '企业授权'
      } else{
        return '企业plus授权'
      }
    },
    /**
     * 分页
     */
    currentChange(val) {
      this.pageNum = val;
      this.orderPage();
    },
    /**
     * 获取购买记录列表
     */
    orderPage() {
      let data = {
        userId: sessionStorage.getItem('userId')
      }
      let page = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }
      $http.orderPage(data, page).then(res => {
        this.total = res.total;
        this.list = res.rows;
      })
    },
    //评论
    handleClick(row) {
      this.dialogFormVisible = true;
    },

    //表情
    addEmoji(item) {
      console.log(item);
      this.textarea += item;
    },

    //投诉
    action(row) {
      this.row = row;
      console.log(row);
      this.actionDia = true;
      this.$refs.feedbackWork.init();

    },

    //查看证书
    lookPdf(url) {
      window.open(url);
    },

    //发票
    vatAction() {
      this.$router.push({
        name: "VatInvoice",
      });
    },

    //补充证书
    viewCer(row) {
      this.$router.push({
        name: "CertificateView",
        params: {
          id: row.orderId,
        },
      });
    },
    //查看说明
    viewTion() {
      this.$router.push({
        name: "Explanation",
      });
    },
  },
};
</script>

<style scoped>
.sale-bar p {
  font-size: 14px;
}
.sale-table >>> .el-table th.el-table__cell > .cell {
  color: #050404;
}
.sale-table {
  margin-bottom: 2%;
}
.btn-wrapper {
  cursor: pointer;
  color: #03acfd;
  margin: 5px 0;
}
.btn-wrapper:hover {
  font-weight: 600;
}
.sale-type-r >>> .el-button {
  border: 0;
}
</style>
